<template>
  <div class="mycolors">
      <ul>
          <li
           v-for="(item,i) in colors" 
           :key="i" 
           :style="{background:item.type,}" 
           :class="current===i?'active':''"
           @click="selectcolor(item.type,i)"
           ></li>
      </ul>
  </div>
</template>

<script>
export default {
    props:['col'],
    data(){
        return {
            colors:[
                {
                    type:'red',
                    id:0
                },
                {
                    type:'yellow',
                    id:1
                },
                {
                    type:'pink',
                    id:2
                },
                {
                    type:'orange',
                    id:3
                },
                {
                    type:'greenyellow',
                    id:4
                }
            ],
            current:-1
        }
    },
    methods:{
        selectcolor(color,i){
            this.$emit('send:color',color)
            this.current=i
        }
    },
    watch:{
        col(){
            if(!this.col){
                this.current=-1
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.mycolors{
    width: 100%;
    ul{
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            list-style: none;
        }
        .active{
            border: 2px solid orchid;
        }
    }
}

</style>